import {
  getMasterPlanByPage,
  updateMasterPlan,
  getMasterPlanByPageAndInfoId,
  updateMasterPlanStageTime,
  getMasterPlanAndStageByPage,
} from '@/services/project/masterPlan';
import dayjs from '@/components/dayjs';
import { history } from 'umi';
import { ModalForm, ProForm, ProFormDatePicker } from '@ant-design/pro-components';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, message } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useRef, useState } from 'react';
import { Ellipsis } from '@/components/Ellipsis';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
const MasterPlan = React.forwardRef((props, ref) => {
  const actionRef = useRef<ActionType>();
  const [tempDate, setTempDate] = useState<any[]>();
  const [timeRef] = Form.useForm();
  const dateFormat = 'YYYY-MM-DD hh:mm:ss';
  MasterPlan.defaultProps = {
    MasterPlan: true,
    infosId: '',
    teamsId: '',
  };
  const masterPlanFlag = props.masterPlanFlag;
  const masterPlanInfoId = props.masterPlanInfoId;
  const masterPlanTeamId = props.masterPlanTeamId;
  //修改计划时间=>点击保存
  const updatePlan = async (params: any) => {
    const result = await updateMasterPlan(params);
    if (result != null) {
      message.success('添加成功');
    }
    actionRef.current!.reload();
  };

  React.useImperativeHandle(ref, () => ({
    update() {
      actionRef.current?.reload();
    },
  }));

  //日期联动
  const listenDate = (dateString: string, date: string, period: number) => {
    if (!(dateString == null)) {
      timeRef.setFieldsValue({
        [date]: dayjs(dateString)
          .add(period / 24, 'day')
          .format('YYYY-MM-DD'),
      });
    }
  };

  //开始日期与前一项结束日期联动
  const DateModify = (value: any, date: string) => {
    if (value) {
      timeRef.setFieldsValue({
        [date]: dayjs(value).subtract(1, 'day').format('YYYY-MM-DD'),
      });
    }
  };

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 60,

      search: false,
    },
    {
      title: '计划编号',
      dataIndex: 'masterPlanCode',
      width: 150,

      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      width: 200,
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目交付日期',
      dataIndex: 'deliveryDate',
      valueType: 'date',
      width: 120,
      search: false,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目开工开始',
      dataIndex: 'stagePlanStartTime1',
      valueType: 'date',
      width: 100,

      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '项目开工结束',
      dataIndex: 'stagePlanEndTime1',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: '柜体设计开始',
      dataIndex: 'stagePlanStartTime2',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体设计结束',
      dataIndex: 'stagePlanEndTime2',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `物料采购开始`,
      dataIndex: 'stagePlanStartTime3',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `物料采购结束`,
      dataIndex: 'stagePlanEndTime3',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `生产分料开始`,
      dataIndex: 'stagePlanStartTime4',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产分料结束`,
      dataIndex: 'stagePlanEndTime4',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `生产制造开始`,
      dataIndex: 'stagePlanStartTime5',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `生产制造结束`,
      dataIndex: 'stagePlanEndTime5',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `打包入库开始`,
      dataIndex: 'stagePlanStartTime6',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `打包入库结束`,
      dataIndex: 'stagePlanEndTime6',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    {
      title: `发货日期开始`,
      dataIndex: 'stagePlanStartTime7',
      valueType: 'date',

      width: 100,
      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: `发货日期结束`,
      dataIndex: 'stagePlanEndTime7',
      valueType: 'date',
      width: 100,

      search: false,
      align: 'center',
      sorter: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },

    // {
    //   title: `现场安装开始`,
    //   dataIndex: 'stagePlanStartTime8',
    //   valueType: 'date',
    //   width: 100,

    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `现场安装结束`,
    //   dataIndex: 'stagePlanEndTime8',
    //   valueType: 'date',
    //   width: 100,
    //   search: false,

    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `现场调试开始`,
    //   dataIndex: 'stagePlanStartTime9',
    //   valueType: 'date',

    //   width: 100,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `现场调试结束`,
    //   dataIndex: 'stagePlanEndTime9',
    //   valueType: 'date',

    //   width: 100,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },

    // {
    //   title: `项目验收开始`,
    //   dataIndex: 'stagePlanStartTime10',
    //   valueType: 'date',
    //   width: 100,

    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: `项目验收结束`,
    //   valueType: 'date',

    //   dataIndex: '',
    //   width: 100,
    //   search: false,
    //   align: 'center',
    //   sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   title: '预留',
    //   dataIndex: 'reserved',
    //   search: false,
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    // {
    //   search: false,
    //   title: '流水号',
    //   dataIndex: 'serialNo',
    //   width: 90,
    //  align: 'center',sorter: true,
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '创建日期', //表头显示的名称
      search: false,

      dataIndex: 'createTime',
      valueType: 'date',
      width: 90,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建人', //表头显示的名称
      search: false,

      dataIndex: 'createName',
      width: 90,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '备注',
      dataIndex: 'memo',
      width: 90,

      search: false,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      hideInTable: true, //备注隐藏
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      width: 140,
      render: (text, record, _, action) => [
        <ModalForm
          key="add"
          title="编辑"
          trigger={<span style={{ color: '#13C2CE', cursor: 'pointer' }}>编辑</span>}
          form={timeRef}
          width={520}
          initialValues={{
            projectName: record.projectName,
            deliveryDate: record.deliveryDate,
            masterPlanCode: record.masterPlanCode,
            memo: record.memo,
            reserved: record.reserved,
            serialNo: record.serialNo,
            id: record.id,
            stagePlanStartTime1: record.stagePlanStartTime1,
            stagePlanStartTime2: record.stagePlanStartTime2,
            stagePlanStartTime3: record.stagePlanStartTime3,
            stagePlanStartTime4: record.stagePlanStartTime4,
            stagePlanStartTime5: record.stagePlanStartTime5,
            stagePlanStartTime6: record.stagePlanStartTime6,
            stagePlanStartTime7: record.stagePlanStartTime7,
            // stagePlanStartTime8: record.stagePlanStartTime8,
            // stagePlanStartTime9: record.stagePlanStartTime9,
            // stagePlanStartTime10: record.stagePlanStartTime10,
            stagePlanEndTime1: record.stagePlanEndTime1,
            stagePlanEndTime2: record.stagePlanEndTime2,
            stagePlanEndTime3: record.stagePlanEndTime3,
            stagePlanEndTime4: record.stagePlanEndTime4,
            stagePlanEndTime5: record.stagePlanEndTime5,
            stagePlanEndTime6: record.stagePlanEndTime6,
            stagePlanEndTime7: record.stagePlanEndTime7,
            stagePlanEndTime8: record.stagePlanEndTime8,
            stagePlanEndTime9: record.stagePlanEndTime9,
            stagePlanEndTime10: record.stagePlanEndTime10,
          }}
          onFinish={async (values) => {
            const res = timeRef.getFieldsValue();
            console.log(record, 'recordrecordrecord');
            //构造参数
            let temp: any[] = [];
            for (let i = 1; i <= 7; i++) {
              temp.push({
                id: record && `${record['id' + i]}`,
                stagePlanEndTime:
                  res &&
                  res['stagePlanEndTime' + i] &&
                  dayjs(`${res['stagePlanEndTime' + i]}`).format('YYYY-MM-DD'),
                stagePlanStartTime:
                  res &&
                  res['stagePlanStartTime' + i] &&
                  dayjs(`${res['stagePlanStartTime' + i]}`).format('YYYY-MM-DD'),
              });
            }
            console.log(temp, '修改时间传的数据');
            const result = await updateMasterPlanStageTime(temp);
            console.log(result, 'result');
            return true;
          }}
          modalProps={{
            destroyOnClose: true,
            onCancel: () => {
              timeRef.setFieldsValue({
                projectName: record.projectName,
                deliveryDate: record.deliveryDate,
                commissionEndDate: record.commissionEndDate,
                commissionPeriod: record.commissionPeriod,
                commissionStartDate: record.commissionStartDate,
                deliveryEndDate: record.deliveryEndDate,
                deliveryPeriod: record.deliveryPeriod,
                deliveryStartDate: record.deliveryStartDate,
                designEndDate: record.designEndDate,
                designPeriod: record.designPeriod,
                designStartDate: record.designStartDate,
                facEndDate: record.facEndDate,
                facperiod: record.facperiod,
                facStartDate: record.facStartDate,
                inboundEndDate: record.inboundEndDate,
                inboundPeriod: record.inboundPeriod,
                inboundStartDate: record.inboundStartDate,
                installEndDate: record.installEndDate,
                installPeriod: record.installPeriod,
                installStartDate: record.installStartDate,
                kickoffEndDate: record.kickoffEndDate,
                kickoffPeriod: record.kickoffPeriod,
                kickoffStartDate: record.kickoffStartDate,
                logistcEndDate: record.logistcEndDate,
                logistcPeriod: record.logistcPeriod,
                logistcStartDate: record.logistcStartDate,
                masterPlanCode: record.masterPlanCode,
                memo: record.memo,
                orderEndDate: record.orderEndDate,
                orderPeriod: record.orderPeriod,
                orderStartDate: record.orderStartDate,
                packEndDate: record.packEndDate,
                packPeriod: record.packPeriod,
                packStartDate: record.packStartDate,
                purchaseEndDate: record.purchaseEndDate,
                purchasePeriod: record.purchasePeriod,
                purchaseStartDate: record.purchaseStartDate,
                receiptEndDate: record.receiptEndDate,
                receiptPeriod: record.receiptPeriod,
                receiptStartDate: record.receiptStartDate,
                reserved: record.reserved,
                serialNo: record.serialNo,
                id: record.id,
              });
            },
          }}
        >
          <ProForm.Group>
            <div style={{ marginTop: 30 }}>{tempDate && tempDate[0].stageName1}</div>
            <ProFormDatePicker name="stagePlanStartTime1" label="计划开始日期" />
            <ProFormDatePicker name="stagePlanEndTime1" label="计划结束日期" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName2}</div>
            <ProFormDatePicker
              name="stagePlanStartTime2"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime1');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime2" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName3}</div>
            <ProFormDatePicker
              name="stagePlanStartTime3"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime2');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime3" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName4} </div>
            <ProFormDatePicker
              name="stagePlanStartTime4"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime3');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime4" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName5}</div>
            <ProFormDatePicker
              name="stagePlanStartTime5"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime4');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime5" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName6}</div>
            <ProFormDatePicker
              name="stagePlanStartTime6"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime5');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime6" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName7}</div>
            <ProFormDatePicker
              name="stagePlanStartTime7"
              label=""
              onChange={(date: any) => {
                DateModify(date, 'stagePlanEndTime6');
              }}
            />
            <ProFormDatePicker name="stagePlanEndTime7" label="" disabled />
          </ProForm.Group>
          {/* <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName8}</div>
            <ProFormDatePicker name="stagePlanStartTime8" label="" />
            <ProFormDatePicker name="stagePlanEndTime8" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName9}</div>
            <ProFormDatePicker name="stagePlanStartTime9" label="" />
            <ProFormDatePicker name="stagePlanEndTime9" label="" />
          </ProForm.Group>
          <ProForm.Group>
            <div style={{}}>{tempDate && tempDate[0].stageName10}</div>
            <ProFormDatePicker name="stagePlanStartTime10" label="" />
            <ProFormDatePicker name="stagePlanEndTime10" label="" />
          </ProForm.Group> */}
        </ModalForm>,
        // <a
        //   key="editPlanKey"
        //   onClick={() => {
        //     history.push({ pathname: '/project/batchPlan', state: { infoId: record.infoId } });
        //   }}
        // >
        //   批次计划
        // </a>,
      ],
    },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="项目计划查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        // toolBarRender={masterPlanFlag}
        toolBarRender={(action, { selectedRows }) => []}
        search={masterPlanFlag}
        request={async (params = {}, sort) => {
          const sorters = sortTran(sort);
          const filters = filterTran(params);
          //两种情况
          console.log(masterPlanInfoId, 'masterPlanInfoId');
          let result;
          if (masterPlanFlag === undefined) {
            result = await getMasterPlanAndStageByPage({
              ...params,
              sorters: sorters,
              filters: filters,
            });
          } else {
            const masterParams = {
              current: 1,
              filters: [
                {
                  andOr: 'and',
                  field: 'infoId',
                  operator: 'eq',
                  value: masterPlanInfoId,
                },
              ],
              pageSize: 20,
              sorters: [],
            };
            result = await getMasterPlanAndStageByPage(masterParams); //获取附件
          }
          //数据改造
          console.log(result, 'conetntconetntconetnt');
          const allTemp: any[] = [];
          result.data.content.map((ele: any) => {
            const temp: any[] = [];
            ele.planStagesEx.map((item: any) => {
              temp[`stageName${item.stageSort}`] = item.stageName;
              temp[`id${item.stageSort}`] = item.id;
              temp[`stagePlanEndTime${item.stageSort}`] = item.stagePlanEndTime;
              temp[`stagePlanStartTime${item.stageSort}`] = item.stagePlanStartTime;
            });
            temp['projectName'] = ele.masterPlanEx.projectName;
            temp['infoId'] = ele.masterPlanEx.infoId;
            temp['id'] = ele.masterPlanEx.id;
            temp['reserved'] = ele.masterPlanEx.reserved;
            temp['deliveryDate'] = ele.masterPlanEx.deliveryDate;
            temp['masterPlanCode'] = ele.masterPlanEx.masterPlanCode;
            temp['createTime'] = ele.masterPlanEx.createTime;
            temp['createName'] = ele.masterPlanEx.createName;
            allTemp.push(temp);
          });
          setTempDate(allTemp);
          return {
            data: allTemp,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 2000, y: 600 }}
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
});
export default MasterPlan;
